<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询类型：">
              <el-select
                v-model="form.orderType"
                placeholder="请选择查询类型"
                filterable
                clearable
                @change="getTableData()"
                style="width: 10.9vw"
              >
                <el-option
                  v-for="item in OrderTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="所属班组：">
              <el-select
                v-model="form.CLIENT_NO"
                placeholder="请选择"
                style="width: 10.9vw"
                filterable
              >
                <el-option
                  v-for="item in ClientNoAll"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="车辆牌照：">
              <el-input
                v-model="form.LICENSE_PLATE"
                style="width: 10.9vw"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getTableData"
              >查 询</el-button
            >
            <el-button size="mini" type="warning" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form" :label-width="labelwidth">
            <el-form-item label="司机姓名：">
              <el-input
                v-model="form.NAME"
                placeholder="请输入司机姓名"
                style="width: 10.9vw"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询月份：">
              <el-date-picker
                v-model="form.WORKMONTH"
                type="month"
                style="width: 10.9vw"
                value-format="yyyy-MM"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
    >
      <el-table-column
        prop="WORKTYPE"
        label="作业类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKDATE"
        label="日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="CLIENT_NAME"
        label="区域名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LNAME"
        label="标段名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="COMPANY"
        label="作业公司"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LICENSE_PLATE"
        label="车辆牌照"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="NAME"
        label="司机姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="SNAME"
        label="班次名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ONWORKTIME"
        label="上班时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="OFFWORKTIME"
        label="下班时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LINENAME"
        label="路线名称"
        align="center"
        width="200"
      ></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import export2Excel from '@/utils/exportExcel/index.js'
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      tableData: [],
      tableDataAlarm: [],
      ClientNoAll: [],
      WorkTypeList: [{
        label: '环卫工'
      }, {
        label: '班组长'
      }],
      form: {
        orderType: '1',
        CLIENT_NO: '00000',
        workType: '环卫工',
        NAME: '',
        // datetype: 'month',
        dateformat: 'yyyy-MM',
        WORKMONTH: formatDate(new Date(), 'yyyy-MM'),//月
        LICENSE_PLATE: '',
      },
      //查询条件
      TransSearch: {
        ID: '0',
        ClientNo: localStorage.getItem('CLIENT_NO'),
        point: '',
        WORKMONTH: '',
        CPH: '',
        NAME: '',
        CLIENT_NO: '',
        OIL_TYPE: ''
      },
      formRow: {},
      showOrderDetail: false,
      showReject: false,
      showAlarm: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();;
        },
      }
    }
  },
  created () {

    this.getClientInfoAll();
  },
  mounted () {
    this.getTableData();
  },
  methods: {
    //获取所属区域信息-全
    async getClientInfoAll () {
      var url = 'Vehicle/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      this.ClientNoAll = data
      // this.ClientNoAll.push({
      //   CLIENT_NO: "00000",
      //   CLIENT_NAME: "全部"
      // })
    },
    async getTableData () {
      var url = 'Vehicle/GetCalendarPlanInfoPB3?ClientNo=' + this.form.CLIENT_NO
        + '&LICENSE_PLATE=' + this.form.LICENSE_PLATE + '&NAME=' + this.form.NAME
        + '&WORKMONTH=' + this.form.WORKMONTH
      const { data } = await this.$Http.get(url)
      this.tableData = data
    },
    // 导出Excel
    exportExcel () {
      let excelName = '作业类型每日作业计划'
      const tHeader = ['作业类型', '日期', '区域名称', '标段名称', '作业公司', '车辆牌照', '司机姓名', '班次名称', '上班时间', '下班时间', '路线名称']
      const filterVal = ['WORKTYPE', 'WORKDATE', 'CLIENT_NAME', 'LNAME', 'COMPANY', 'LICENSE_PLATE', 'NAME', 'SNAME', 'ONWORKTIME', 'OFFWORKTIME', 'LINENAME']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange (size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
  }
}
</script>
